/**
 * Charts2：每日执行记录
 */
import React  from 'react'
import style from './index.less'
import echarts from 'echarts'

import {IECharts} from '../../../../components'

const Charts2=({
	name='温度计式图表',
	data={
		name:['Cosco','CMA','APL','OOCL','Wanhai','Zim'],
		data:[
			['Acutal',260, 200, 220, 120, 100, 80],
			['Forecast',40, 80, 50, 80,80, 70]
		]
	},
	height=300
})=>{

	const myProps={
		option :  {
			color:['#5ab1ef', '#d87a80', '#91c7ae','#749f83',  '#ca8622', '#bda29a','#6e7074', '#546570', '#c4ccd3'],
			tooltip : {
	        trigger: 'axis',
					confine:true,
	        axisPointer : {            // 坐标轴指示器，坐标轴触发有效
	            type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
	        }
	    },
			grid: {
				 left: '3%',
				 right: '4%',
				 bottom: '3%',
				 top:'12%',
				 containLabel: true
		 },
	    legend: {
	        selectedMode:false,
	        data:data.data.map(item=>item[0])
	    },

	    calculable : true,
	    xAxis : [
	        {
	            type : 'category',
	            data : data.name
	        }
	    ],
	    yAxis : [
	        {
	            type : 'value',
	            boundaryGap: [0, 0.1]
	        }
	    ],
	    series : data.data.map((item,i)=>{
				return {
					name: item[0],
					type:'bar',
					stack: 'sum',
					barCategoryGap: !i?'50%':null,
					itemStyle: {
							normal: !i?{

									label : {
											show: true, position: 'insideTop'
									}
							}:{

									label : {
											show: true,
											position: 'top',
											// formatter: function (params) {
											// 		for (var i = 0, l = myProps.option.xAxis[0].data.length; i < l; i++) {
											// 				if (myProps.option.xAxis[0].data[i] == params.name) {
											// 						return myProps.option.series[0].data[i] + params.value;
											// 				}
											// 		}
											// },
											// textStyle: {
											// 		color: 'tomato'
											// }
									}
							}
					},
					data: item.slice(1)
				}
			})
		}
	}

  return(
    <div  className={`chart ${style.chart}`} style={{height}}>
      <IECharts {...myProps} resizable={true}/>
    </div>
  )
}

Charts2.propTypes={
	// data
}

export default Charts2
